<template>
  <div>
    <el-table-draggable handle=".handle">
      <el-table
        :data="list"
        row-class-name="handle"
        :row-style="{
          'user-select': 'none',
          cursor: 'move',
        }"
      >
        <el-table-column type="index" label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            <span>{{ scope.row.metaName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="数量">
          <template slot-scope="scope">
            <el-input-number
              size="mini"
              v-model="scope.row.num"
              :controls="false"
            />
          </template>
        </el-table-column>
        <el-table-column label="使用期天数">
          <template slot-scope="scope">
            <el-input-number
              size="mini"
              v-model="scope.row.usePeriodDay"
              :controls="false"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="犹豫期天数">
          <template slot-scope="scope">
            <el-input-number
              size="mini"
              v-model="scope.row.waitingPeriodDay"
              :controls="false"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="等待期说明">
          <template slot-scope="scope">
            <el-input
              type="textarea"
              v-model="scope.row.waitingPeriodRemark"
              :autosize="{ minRows: 1, maxRows: 6 }"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              @click="handleDelete(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>

        <el-table-column label="排序" width="80">
          <template slot-scope="scope">
            <svg-icon
              icon-class="drag"
              style="width: 20px; height: 20px; color: #409eff; "
            ></svg-icon>
          </template>
        </el-table-column>
      </el-table>
    </el-table-draggable>
  </div>
</template>

<script>
import ElTableDraggable from "element-ui-el-table-draggable";

export default {
  components: {
    ElTableDraggable,
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    handleDelete(index) {
      this.$emit("delete-item", index);
    },
  },
};
</script>

<style scoped></style>
